<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getMyOrderList } from '@/apis/order'
import OrderListItem from '@/components/OrderListItem.vue'
const router = useRouter() 
const route = useRoute()
const active = ref('')
active.value = route.query.dataType || 'all'
const page = ref(1)
const list = ref([])
const getOrderList = async() => {
  const { data } = await getMyOrderList(active.value, page.value)
  data.list.data.forEach(item => {
    item.total_num = 0
    item.goods.forEach(item => {
      item.total_num += item.goods_num
    })
  })
  list.value = data.list.data
}
watch(active, (newValue, oldValue) => {
  page.value = 1  // 重置页码
  list.value = []  // 清空列表
  getOrderList()
  console.log(newValue, oldValue)
}, { immediate: true })  // 立即执行一次
defineOptions({
  name: 'OrderIndex'
})
</script>

<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="router.go(-1)" />

    <van-tabs v-model:active="active" sticky>
      <van-tab title="全部" name="all"></van-tab>
      <van-tab title="待支付" name="payment"></van-tab>
      <van-tab title="待发货" name="delivery"></van-tab>
      <van-tab title="待收货" name="recieved"></van-tab>
      <van-tab title="待评价" name="comment"></van-tab>
    </van-tabs>

    <OrderListItem v-for="item in list" :key="item.order_id" :item="item"></OrderListItem>
  </div>
</template>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
  :deep(.van-nav-bar__title) {
    font-weight: normal;
  }
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>